import React,{useEffect, useState} from 'react';
import {Table, Button, Tag, notification } from 'antd'
import axios from 'axios'

const AuditList = (props) => {
    const [dataSource, setdataSource] = useState([]);
    //取出本地当前用户的信息
    const {username} = JSON.parse(localStorage.getItem('token'))
    useEffect(() => {
        axios.get(`/news?author=${username}&auditState_ne=0&publishState_lte=1&_expand=category`)
        .then(res=>{
            // console.log(res.data)
            setdataSource(res.data)
        })
    }, [username]);
    // 判断审核状态填充颜色
    const colorList = ["black", "orange", "green", "red"]
    // 撤销按钮
    const handleRervert =(item) => {
        setdataSource(dataSource.filter(data=>data.id!==item.id))
        axios.patch(`/news/${item.id}`,{
            auditState: 0
        }).then(res=>{
            notification.info({
                message: `撤销成功`,
                description:`您可以去草稿箱中查看您撤销的新闻`,
                placement:'bottomRight',
              });
        })
    }
    // 更新按钮
    const handleUpdata = (item) => {
        props.history.push(`/news-manage/update/${item.id}`)
    }
    // 发布按钮
    const handlePublish = (item) => {
        setdataSource(dataSource.filter(data=>data.id!==item.id))
        axios.patch(`/news/${item.id}`,{
            publishState: 2,
            publishTime: Date.now()
        }).then(res=>{
            props.history.push('/publish-manage/published')
            notification.info({
                message: `发布成功`,
                description:`您可以去发布中查看您发布管理的新闻`,
                placement:'bottomRight',
              });
        })
    }
    const columns = [
        {
            title: '新闻标题',
            dataIndex: 'title',
            render:(title, item)=>{
                return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
            }
        },
        {
            title: '作者',
            dataIndex: 'author',
        },
        {
            title: '新闻分类',
            dataIndex: 'category',
            render:(category)=>{
                return category.title
            }
        },
        {
            title: '审核状态',
            dataIndex: 'auditState',
            render:(auditState)=>{
                return auditState === 1?<Tag color={colorList[auditState]}>审核中</Tag>:auditState===2?
                <Tag color={colorList[auditState]}>已通过</Tag>:<Tag color={colorList[auditState]}>未通过</Tag>
            }
        },
        {
            title: '操作',
            render: (item)=>{
                return <div>
                    {
                        item.auditState === 1 && <Button danger onClick={()=>handleRervert(item)}>
                            撤销
                        </Button>
                    }
                    {
                        item.auditState === 2 && <Button type="dashed" onClick={()=>handlePublish(item)}>发布</Button>
                    }
                    {
                        item.auditState === 3 && <Button type="primary" onClick={()=>handleUpdata(item)}>更新</Button>
                    }
                </div>
            }
        },
      ];
    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{
                pageSize:5
            }} rowKey={item=>item.id}/>
        </div>
    );
};

export default AuditList;